<template>
  <div class="form-item">
      <template>
        <Form ref='options.formValidate' :model="options.formValidate" :rules="options.ruleValidate" :label-width="120">
          <template v-for="formItem in list">
            <!-- 输入框 -->
            <FormItem :label="formItem.label" :prop="formItem.prop"  v-if="formItem.type == 'input'">
                <Input v-model="options.formValidate[formItem.prop]" :type="formItem.inputtype" :placeholder="formItem.placeholder"></Input>
            </FormItem>
            <!-- 上传图片 -->
            <FormItem :label="formItem.label"  :prop="formItem.prop" v-if="formItem.type == 'uploadImg'">
              <template>
                 <upload-img  
                  @handleSuccess="(value)=>{return handleSuccess(value,formItem)}"  
                  :formStyle="formItem.formStyle" 
                  :imgUrl.sync = "options.formValidate[formItem.prop]" 
                 >          
                 </upload-img>
              </template>
            </FormItem>
            <!-- 上传视频 -->
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'uploadVideo'">
              <template>
                 <upload-video 
                  @handleVideo="(value)=>{return handleVideo(value,formItem)}"  
                  :formStyle="formItem.formStyle" 
                  :videoUrl.sync = "options.formValidate[formItem.prop]" 
                 >          
                 </upload-video>
              </template>
            </FormItem>
             <!-- 下拉框 -->
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'select'">
              <Select v-model="options.formValidate[formItem.prop]" label-in-value>
                <Option :value="select.id" :key="select.id" :label="select.category_name" v-for ="select in formItem.selectData">
                </Option>
              </Select>
            </FormItem>
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'embed'">
                <Upload :action="$audioApi"
                    :on-success="handleAudiosuccess"
                    :data="uploadClient"
                    name="files"
                    :show-upload-list="false"
                >
                 <Button icon="ios-cloud-upload-outline">上传音频</Button>
                </Upload>
                <div style="width:100%;margin-top: 10px;display:inline-block" v-if="options.formValidate[formItem.prop]">
                  <audio  controls>
                    <source :src="$imgUrl + options.formValidate[formItem.prop]"  type="audio/ogg">
                    <source :src="$imgUrl + options.formValidate[formItem.prop]"  type="audio/mpeg">
                  您的浏览器不支持 audio 元素。
                  </audio>
                </div>
            </FormItem>
            <!-- 日期选择器 -->
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'DatePicker'">
              <Row>
                <Col span="11">
                    <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="11">
                    <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
                </Col>
              </Row>
            </FormItem>
            <!-- 单选框 -->
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'radio'">
              <RadioGroup v-model="formItem.radio">
                <Radio label="male">Male</Radio>
                <Radio label="female">Female</Radio>
              </RadioGroup>
            </FormItem>
            <!-- 复选框 -->
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'checkbox'">
              <CheckboxGroup v-model="formItem.checkbox">
                <Checkbox label="Eat"></Checkbox>
                <Checkbox label="Sleep"></Checkbox>
                <Checkbox label="Run"></Checkbox>
                <Checkbox label="Movie"></Checkbox>
              </CheckboxGroup>
            </FormItem>
            <!-- 开关 -->
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'switch'">
              <i-switch v-model="formItem.switch" size="large">
                <span slot="open">On</span>
                <span slot="close">Off</span>
              </i-switch>
            </FormItem>
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'slider'">
              <Slider v-model="formItem.slider" range></Slider>
            </FormItem>
            <!-- 编辑器 -->
            <FormItem :label="formItem.label" :prop="formItem.prop" v-if="formItem.type == 'editor'">
               <!--  <markdown style="height:600px" :catchData="catchData"  :content="options.formValidate[formItem.prop]"></markdown> -->
               <wangeditor :catchData="catchData" :content="options.formValidate[formItem.prop]"></wangeditor>
            </FormItem>
            <!-- 自定义表单 -->
            <FormItem :key="item.label" :label="item.label" :prop="item.prop" v-for="item in formItem.formArray" v-if="formItem.type == 'custom'">
               <slot :name="item.slot"></slot>
            </FormItem>
            <!-- 注释 -->
            <FormItem  v-if="formItem.type == 'notes'" >  
                <p class="upload_font">{{formItem.value}}</p>
            </FormItem>
          </template>
          <FormItem>
            <div class="footer">
              <Button @click="handleclose('options.formValidate')">取消</Button>
              <Button @click="handleSubmit('options.formValidate')" type="warning">确定</Button>
            </div>
          </FormItem>
        </Form>
      </template>
  </div>
</template>

<script>
import wangeditor from '@/components/wangeditor'
import markdown from '@/components/markdown'
import uploadImg from '@/components/uploadImg'
import uploadVideo from '@/components/uploadVideo'
export default {
  name: "formTemplate",
  data() {
    return {
      imgUrl:'',
      videoUrl:"",
      uploadClient : {},
    };
  },
  props: {
    options: {
      type: Object,
      default: () => {}
    },
    total:{
      type: Number,
      default: () => {}
    },
    list:{
      type: Array,
      default: () => {}
    },
    formData:{
      type: Object,
      default: () => {}
    },
  },
  components: {
      markdown,
      uploadImg,
      uploadVideo,
      wangeditor
  },
  computed: {

  },
  watch:{

  },
  mounted() {
    this.uploadClient = {
      session_id: this.Cookies.get('session')
    }
  },
  methods: {
    catchData(value){
      this.options.formValidate.content =  value
    },
    handleclose(name){
      this.$emit("handleclose");
      this.options.formValidate= {}
      this.$refs[name].resetFields(); // 点击取消按钮后对表单进行重置
      // if(this.options.isedit){
      //   this.options.formValidate= {}
      //   this.$refs[name].resetFields(); // 点击取消按钮后对表单进行重置
      // }
      this.options.modal = false
    },
    handleSuccess(value,formItem) {
      this.options.formValidate[formItem.prop] =  value  // 上传图片的路径名
    },
    handleVideo(value,formItem) {
      this.options.formValidate[formItem.prop] =  value  // 上传视频的路径名
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$emit("handleSubmit",name);
        } else {
          this.$Message.error('请填写完整信息!');
        }
      })
    },
  }
};
</script>

<style scoped>
  .vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ivu-modal{
    top: 0;
  }
  .footer{
    width: 100%;
    text-align: right;
  }
  .form-item{
    padding: 0 25px 0 0;
  }
  .footer button{
    margin-left: 30px;
  }
</style>
